<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>2.分析Hello效果</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			总结：
				1.Vue实例和容器是一一对应的，真实开发中只有一个Vue实例，而且还会配合组件一起使用；
				2.data中的数据，只要发生改变，模板中用到该数据的地方就会自动更新（局部更新）；
				3.{{xxx}}中的xxx要写js表达式，且xxx可以直接看到data中配置的属性；

				注意区分【js表达式】与【js语句（代码）】
						1.表达式：会产生一个值，可以放在任何一个需要值的地方
								(1). 1
								(2). a
								(3). demo()
								(4). x === y ? 1 : 0
								(5). 200 - 2
								(6). arr.map()
						2.语句（代码）: 不会产生值，只是控制代码走向
								(1). if(){}
								(2). for(){}
								(3). try{} catch(err){}
								等等.....
		-->
		<!-- 准备好一个容器 -->
		<div id="demo">
			<input type="text">
			<h1>Hello，{{name}}！！！</h1>
			<h1>Hello，{{name + '！！！'}}</h1>
			<h1>Hello，{{name.toUpperCase()}}</h1>
			<h1>Hello，{{name.toUpperCase().slice(0,2)}}</h1>
			<h1>是否成年：{{age >= 18 ? '成年' : '未成年'}}</h1>
			<h1>测试1：{{1+1}}</h1>
			<h1>测试2：1+1</h1>
		</div>

		<script type="text/javascript" >
			//关闭生产提示
			Vue.config.productionTip = false

			//创建一个Vue的实例对象
			new Vue({
				el:'#demo', 
				data:{
					name:'atguigu',
					age:8
				}
			})

		</script>

	</body>
</html>